<template>
  <div class="add-edit">
    <Steps :active-step="active" />
    <First v-show="active===0" :form-data="detail" @next="stepHandle" @get-drawing-data="getDrawingData" />
    <Second v-show="active===1" :form-data="detail" :drawing-data="drawingData" @next="stepHandle" @prev="stepHandle" />
    <Three v-show="active===2" :form-data="detail" @next="stepHandle" @prev="stepHandle" />
  </div>
</template>
<script>
import Steps from './components/steps'
import First from './first'
import Second from './second'
import Three from './three'
import { getGetOneByid, postSelectByModelId } from '@/api/decorate'
export default {
  name: 'DecorateAddEdit',
  components: {
    Steps,
    First,
    Second,
    Three
  },
  data() {
    return {
      active: 0,
      detail: {
        // 步骤1
        shopCode: '',
        shopName: '',
        clientCode: '',
        clientName: '',
        officeCode: '',
        officeName: '',
        shopType: '',
        shopBizType: [],
        shopCityLevel: '',
        shopAddress: '',
        constCodeDialog: [],
        constCode: '',
        constType: '',
        dataFrom: '',
        bizmanType: '',
        decorationForm: '',
        decorationRange: [],
        applicantCode: '',
        applicantName: '',
        businessStatus: '', // 门店营业状态
        // 装修申请信息
        range: [],
        nature: '',
        officeNature: '',
        isDeductCashDeposit: '',
        deductCashDepositAmount: '',
        colorType: [],
        colorDefiniteDetailed: [],
        innerSize: [],
        // 现场开工条件判断
        startCondition: {
          constPicRemark: false,
          acRemark: false,
          wpRemark: false,
          fcRemark: false,
          horizonRemark: false
        },
        constPicRemark: '',
        acRemark: '',
        wpRemark: '',
        fcRemark: '',
        horizonRemark: '',
        expectDecorationTime: '',
        expectOpenTime: '',
        expectDesc: '',
        // 步骤2
        designPictureDTOS: [],
        // 步骤3
        files: []
      },
      drawingData: []
    }
  },
  created() {
    this.getDetail()

    const user = this.$store.state.user.userData || {}
    this.detail.applicantCode = user.account
    this.detail.applicantName = user.userName
  },
  methods: {
    stepHandle(step) {
      this.active = step
    },
    // 处理编辑数据
    handlerEditData(data) {
      const startCondition = this.$split(data.startCondition)
      data.startCondition = {}
      for (const key of Object.keys(this.detail.startCondition)) {
        data.startCondition[key] = startCondition.includes(key)
      }
      // 范围
      data.decorationRange = this.$split(data.decorationRange)
      data.range = this.$split(data.range)
      if (data.range.filter(e => e !== undefined && e !== '').length === 0) {
        data.range = [...data.decorationRange]
      }
      data.shopBizType = this.$split(data.shopBizType)
      data.decorationForm = this.$split(data.decorationForm)
      data.innerSize = this.$split(data.innerSize)
      data.colorDefiniteDetailed = this.$split(data.colorDefiniteDetailed)
      data.colorType = this.$split(data.colorType)
      // 附件
      data.files ? '' : data.files = []
      data.designPictureDTOS ? '' : data.designPictureDTOS = []
      return data
    },
    getDetail() {
      const { id } = this.$route.query
      if (!id) return
      getGetOneByid(id).then(res => {
        this.detail = this.handlerEditData(res.data)
        this.getDrawingData(this.detail.id)
      })
    },
    // 获取关联图纸
    getDrawingData(id) {
      postSelectByModelId(id).then(res => {
        this.drawingData = res.data
      })
    }
  }

}
</script>
<style lang="scss" scoped>
.add-edit{
  padding-top: 20px;
}
</style>
